<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>已买到的商品</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
		<link rel="stylesheet" type="text/css" href="//unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css" />
		<style>
			.tabChoice {
				color: #007D36;
			}

			li {
				margin-top: 1.25rem;
			}

			.itemLine {
				width: 0.0625rem;
				height: 100%;
				background: #F0F0F0;
			}

			.itemImg {
				width: 5rem;
				height: 6.25rem;
				margin-left: 1.25rem;
				object-fit: cover;
			}
			.el-button--success {
			    color: #FFF;
			    background-color: #007D36;
			    border-color: #007D36;
				margin-top: 0.375rem;
			}
		 
		</style>
	</head>
	<body>
		<div style="width: 67.5rem;height: auto;" class="divColumn" id="content">
			<div style="width: 100%;height: 3.75rem;background: #F5F8FA;" class="divRow divColumnCenter">
				<div class="divRow divColumnCenter" style="height: 100%;" v-for="(item,index) in tabList" @click="itemClick(index)">
					<div style="width: 8.75rem;height: 100%;position: relative;cursor: pointer;" class="divColumn divCenter">
						<div class="divRow divColumnCenter">
							<h3 v-text="item.name" :class="{tabChoice:item.isChoice}">
							</h3>
							<h3 v-text="item.count" style="margin-left: 0.625rem;color: red;"></h3>
						</div>
						<div style="width: 5rem;height: 0.125rem;background: #007D36;margin-top: 1.75rem;position: absolute;" v-show="item.isChoice"></div>
					</div>
					<div style="width: 0.125rem;height: 30%;background:#999999;"></div>
				</div>
			</div>
			<!-- 订单列表 -->
			<div style="width: 100%;height: auto;margin-top: 1.875rem;" class="divColumn">
				<div style="width: 100%;height: 3.75rem;background: #F5F8FA;border: 1px solid #f0f0f0;" class="divRow divColumnCenter">
					<div style="width: 45%;" class="divCenter">宝贝</div>
					<div style="width: 10%;" class="divCenter">单价</div>
					<div style="width: 10%;" class="divCenter">数量</div>
					<div style="width: 15%;" class="divCenter">商品操作</div>
					<div style="width: 15%;" class="divCenter">实付款</div>
					<div style="width: 15%;" class="divCenter">交易状态</div>
					<div style="width: 20%;" class="divCenter">交易操作</div>
				</div>
				<ul>
					<li v-for="(item,index) in orderList">
						<div style="width: 100%;height: 10rem;border: 0.0625rem solid #F0F0F0;" class="divColumn">
							<div style="width: 100%;height: 2.5rem;background:#F5F8FA;position: relative;" class="leftAndRight">
								<el-checkbox v-model="checked" style='margin-left: 1.25rem;'></el-checkbox>
								<div class="divRow divColumnCenter" style="position: absolute;left: 3.125rem;">
									<span style="color: black;font-weight: 600;">2019-09-19</span>
									<span style="margin-left: 1.25rem;color: #999999;">订单号: 629569987144684024</span>
								</div>
								<img src="img/delete_img.png" style="margin-right: 1.25rem;" @click="deleteItem()" />
							</div>
							<div style="width: 100%;height: 7.5rem;" class="divRow divColumnCenter">
								<div style="width: 45%;height: 100%;" class="divRow divColumnCenter">
									<img src="img/test1.jpg" class="itemImg" />
									<div style="width: auto;height: 6.25rem;margin-left: 0.625rem;position: relative;" class="divColumn">
										<p style="font-weight: 600;">美元女孩8plus苹果x手机壳XSMax/XR/iPhoneX女iPhone11Pro全包边防摔保护套 [交易快照]</p>
										<span style="color: #999999;position: absolute;bottom: 0rem;">颜色分类：7plus/8plus 蚕丝 美金女孩</span>
									</div>
								</div>
								<div style="width: 10%;height: 100%;font-weight: 600;" class="divCenter">
									¥9.99

								</div>
								<div style="width: 10%;height: 100%;font-weight: 600;" class="divCenter">
									1
								</div>
								<div style="width: 15%;height: 100%;" class="divColumn divCenter">
									<a href="#">退款/退换货</a>
									<a href="#">投诉商家</a>
								</div>
								<div class="itemLine"></div>
								<div style="width: 15%;height: 100%;" class="divCenter divColumn">
									<h3>¥9.99</h3>
									<span style="margin-top: 0.25rem;color: #999999;">（含运费：￥0.00）</span>



								</div>
								<div class="itemLine"></div>

								<div style="width: 15%;height: 100%;" class="divCenter divColumn">
									<h4>交易关闭</h4>
									<h4>订单详情</h4>
								</div>
								<div class="itemLine"></div>
								<div style="width: 20%;height: 100%;" class="divCenter divColumn">
									<span style="color: #999999;">还剩5天18时</span>
									<el-button type="success">确认收货</el-button>
								</div>
							</div>
						</div>

					</li>
				</ul>




			</div>



			<div style="width: 100%;" class="divCenter">
				<div style="width: 75rem;background: white;height: 7.5rem;position: relative;" class="divCenter">
					<el-checkbox v-model="checked" style='margin-left: 1.25rem;position: absolute;left: 0.625rem;'>全选</el-checkbox>

					<div id="page">
						<el-pagination background layout="prev, pager, next" :total="1000" @current-change="curPage">

						</el-pagination>
					</div>
				</div>
			</div>
		</div>

		<script>
			var content = new Vue({
				el: '#content',
				data: {
					tabList: [{
						name: '所有订单',
						isChoice: true,
						count: ''
					}, {
						name: '待付款',
						isChoice: false,
						count: 6
					}, {
						name: '待发货',
						isChoice: false,
						count: 6
					}, {
						name: '待收货',
						isChoice: false,
						count: 6
					}, {
						name: '待评价',
						isChoice: false,
						count: 6
					}],
					checked: false,
					orderList: [{}, {}, {}, {}, {}, {}, {}, {}, {}]


				},
				methods: {
					itemClick: function(index) {

						for (var i = 0; i < content.tabList.length; i++) {
							if (i == index) {
								content.tabList[i].isChoice = true;
							} else {
								content.tabList[i].isChoice = false;
							}
						}



					},
					curPage(e) {
						console.log(e); //--- 点击所在的页面，从 1 开始算起

					},
					deleteItem: function() {
					 
					}
				}

			})
		</script>




	</body>
</html>
